<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
  <style>
<!-- p中含name属性  -->
      p[name]{
          color:red;
      }
      p[name='p1']{
          color:red;
      }
      /*以p开头*/
      p[name^='p']{
          color:red;
      }
      /*以1结尾*/
      p[name$='1']{
          color:red;
      }
      /*属性name中带有p*/
      p[name*='p']{
          color: blue;
      }
    div[name=d1]{
      color:blue;
    }
    div span {
      color: green;
    }


  </style>
</head>
<body>
<p name="p1">第1个段落</p>
<p name="p1">第2个段落</p>
<p name="p3">第3个段落</p>
<p name="sp1">第4个段落</p>
<hr>
<div name="d1">
  <span>这是span</span>
  <p>这是段落</p>
  <div>这是div</div>
</div>
</body>
</html>